﻿<Page
    x:Class="Coder.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Coder"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="#2B8641">
        <!--Title Portion of the app. Note that 50px left margins must be maintained in a win8 app.-->
        <TextBlock x:Name="Title"  FontSize="52" Margin="50,40,0,0"  Text="Learn Code" FontFamily="Segoe UI Light"  VerticalAlignment="Top" HorizontalAlignment="Left" />

        <SemanticZoom>
            <SemanticZoom.ZoomedInView>
                <GridView Style="{StaticResource PanningGridView}" ItemContainerStyle="{StaticResource PanningGridItemStyle}">
                    <Grid Height="600" Margin="30,0,30,0">
                        <TextBlock Text="Challenges" FontSize="35"/>
                        <StackPanel Orientation="Horizontal">
                            <local:VariableGridView x:Name="MiniChallengeViewModel" SelectionChanged="ChallengeSelected" Height="600" Margin="0,50,0,0" ItemsSource="{Binding MiniChallengeList}" ItemTemplate="{StaticResource ChallengeBrowseTemplate}">
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <VariableSizedWrapGrid Orientation="Vertical" ItemHeight="175" ItemWidth="400" MaximumRowsOrColumns="3" />
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                            </local:VariableGridView>
                            <GridView x:Name="MiniChallengeFunctions" Height="600" Margin="0,50,0,0">
                                <GridView.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapGrid Orientation="Vertical" ItemHeight="175" ItemWidth="175" MaximumRowsOrColumns="3"/>
                                    </ItemsPanelTemplate>
                                </GridView.ItemsPanel>
                                <Grid Width="175" Height="175" Background="#4169E1">
                                    <TextBlock FontSize="24" Text="Uncompleted Challenges" TextWrapping="Wrap" TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                </Grid>
                                <Grid Width="175" Height="175" Background="#4169E1">
                                    <TextBlock FontSize="24" Text="In Progress" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                </Grid>
                                <Grid Width="175" Height="175" Background="#4169E1">
                                    <TextBlock FontSize="24" Text="Completed" VerticalAlignment="Center" HorizontalAlignment="Center" />
                                </Grid>
                            </GridView>
                        </StackPanel>
                    </Grid>

                    <Grid Width="500" Height="600" Margin="0,0,30,0">
                        <TextBlock Text="Chat" FontSize="35"/>
                        <Grid Margin="0,50,0,0" Background="Gray">

                        </Grid>
                    </Grid>
                    <Grid Width="300" Height="600" Margin="0,0,30,0">
                        <TextBlock Text="Leaderboards" FontSize="35"/>
                        <Grid Margin="0,50,0,0" Background="Gray">

                        </Grid>
                    </Grid>
                    <Grid Width="500" Height="600" Margin="0,0,30,0">
                        <TextBlock Text="Byte Code Canada" FontSize="35"/>
                        <Grid Margin="0,50,0,0" Background="Gray">

                        </Grid>
                    </Grid>

                </GridView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <GridView>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>

    </Grid>
</Page>
